<template>
  <view class="search-page">
    <view class="search-header">
      <view class="search-input-wrap">
        <input 
          class="search-input" 
          v-model="keyword"
          placeholder="搜索商家、商品名称"
          @confirm="handleSearch"
          confirm-type="search"
          focus
        />
      </view>
      <text class="cancel-btn" @click="goBack">取消</text>
    </view>

    <!-- 搜索历史 -->
    <view class="search-history" v-if="!keyword && searchHistory.length > 0">
      <view class="history-header">
        <text class="title">搜索历史</text>
        <text class="clear" @click="clearHistory">清空</text>
      </view>
      <view class="history-list">
        <view 
          class="history-item" 
          v-for="(item, index) in searchHistory" 
          :key="index"
          @click="useHistoryKeyword(item)"
        >
          {{item}}
        </view>
      </view>
    </view>

    <!-- 搜索结果 -->
    <view class="search-result" v-if="keyword">
      <view class="result-item" v-for="(item, index) in searchResult" :key="index">
        <image class="shop-image" :src="item.image" mode="aspectFill"></image>
        <view class="shop-info">
          <text class="shop-name">{{item.name}}</text>
          <text class="shop-desc">{{item.desc}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const keyword = ref('')
const searchHistory = ref([])
const searchResult = ref([])

// 从本地存储获取搜索历史
const getSearchHistory = () => {
  const history = uni.getStorageSync('searchHistory') || []
  searchHistory.value = history
}

// 保存搜索历史
const saveSearchHistory = (kw) => {
  let history = uni.getStorageSync('searchHistory') || []
  // 去重
  if (!history.includes(kw)) {
    history.unshift(kw)
    // 最多保存10条
    if (history.length > 10) {
      history = history.slice(0, 10)
    }
    uni.setStorageSync('searchHistory', history)
    searchHistory.value = history
  }
}

// 清空搜索历史
const clearHistory = () => {
  uni.removeStorageSync('searchHistory')
  searchHistory.value = []
}

// 使用历史关键词
const useHistoryKeyword = (kw) => {
  keyword.value = kw
  handleSearch()
}

// 处理搜索
const handleSearch = () => {
  if (!keyword.value.trim()) return
  
  // 保存搜索历史
  saveSearchHistory(keyword.value)
  
  // 模拟搜索结果
  searchResult.value = [
    {
      image: '/static/shops/shop1.png',
      name: '盒马鲜生（宜爱店）',
      desc: '生鲜超市 | 起送¥20'
    },
    {
      image: '/static/shops/shop2.png',
      name: '幸运咖（高新店）',
      desc: '饮品小吃 | 起送¥15'
    }
  ]
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

onMounted(() => {
  getSearchHistory()
})
</script>

<style>
.search-page {
  background: #fff;
  min-height: 100vh;
}
.search-header {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
}
.search-input-wrap {
  flex: 1;
  margin-right: 20rpx;
}
.search-input {
  background: #f5f5f5;
  height: 72rpx;
  border-radius: 36rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
}
.cancel-btn {
  font-size: 28rpx;
  color: #666;
}
.search-history {
  padding: 30rpx;
}
.history-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.title {
  font-size: 28rpx;
  color: #333;
}
.clear {
  font-size: 28rpx;
  color: #999;
}
.history-list {
  display: flex;
  flex-wrap: wrap;
}
.history-item {
  padding: 10rpx 30rpx;
  background: #f5f5f5;
  border-radius: 30rpx;
  margin: 0 20rpx 20rpx 0;
  font-size: 26rpx;
  color: #666;
}
.search-result {
  padding: 20rpx;
}
.result-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.shop-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}
.shop-info {
  flex: 1;
}
.shop-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}
.shop-desc {
  font-size: 24rpx;
  color: #999;
}
</style> 